<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>{{ category.categoryId }}</h2>
    <form @submit.prevent="updateCategory">
      <table>
        <tr>
          <td>CategoryId:</td>
          <td>
            <input type="text" name="categoryId" id="categoryId" v-model="category.categoryId" />
          </td>
        </tr>
        <tr>
          <td>Name:</td>
          <td>
            <input type="text" name="name" id="name" v-model="category.name" />
          </td>
        </tr>
        <tr>
          <td>Image:</td>
          <td>
            <img :src="category.description" width="125" height="125" alt="Category Image" />
            <input type="file" name="file" id="file"  @change="uploadImage" />
            <input type="text" name="file1" id="file1"  style="display: none" v-model="category.description" />
          </td>
        </tr>
      </table>
      <p align="center">
        <input name="editProduct" type="submit" value="Save" />
      </p>
    </form>
  </div>
  <FooterComponent/>
</template>

<script >
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
const COS=require('cos-js-sdk-v5')
export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      category: {
        categoryId: '',
        name: '',
        description: '',
      },
    };
  },
  mounted() {
    // Fetch category data and set it to the category object
    // This is just a placeholder, replace it with your own fetch method
    this.fetchCategoryData().then((categoryData) => {
      this.category = categoryData;
    });
  },
  methods: {
    async uploadImage() {
      const file = document.getElementById('file').files[0];
      const cosInstance = new COS({
        SecretId: 'AKIDZAiNFEMl6RgqrsTE1rbfq0gQAsdAzm0D',
        SecretKey: 'Rx0HYsTD3PuZgvcVQTjHrZLAwkaSrCHJ',
      });
      await cosInstance.uploadFile({
        Bucket: 'red3and-1325710075',
        Region: 'ap-nanjing',
        Key: file.name,
        Body: file,
        SliceSize: 1024 * 1024 * 5,
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData));
        },
      });
      const url = cosInstance.getObjectUrl({
        Bucket: 'red3and-1325710075',
        Region: 'ap-nanjing',
        Key: file.name,
        Sign: false,
      });
      document.getElementById('file1').value = url;
      this.category.description = url;
    },
    updateCategory() {
      // Perform the update category action, replace this with your own method
      // You can use fetch or axios to send a POST request to the server
      // this.fetchUpdateCategory(this.category);
      console.log('Update category:', this.category);
    },
  },
};
</script>
<style scoped>
@import "@/assets/css/myAccount.css";
</style>